<!DOCTYPE html>
<html>

<head>
  <title> new document </title>
  <meta charset="utf-8">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="./09-my-accordion.js"></script>
  <style>
    .accordion {
      width: 80%;
      margin: 0 auto;
    }

    .accordion>.title {
      background: #eee;
      border: 1px soild #aaa;
      padding: 6px;
      font-size: 1.5em;
      font-weight: bold;
      cursor: pointer;
    }

    .accordion>.fade {
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.5s linear;
    }

    .accordion>.in {
      height: 84px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <h1>jQueryUI：Widgets —— Accordion</h1>
  <div id="my-accordion">
    <div>《西游记》简介</div>
    <div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique
      nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque.
      Modi veniam omnis nisi? </div>
    <div>《水浒传》简介</div>
    <div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis
      provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique
      ea est consequatur adipisci at nemo!</div>
    <div>《红楼梦》简介</div>
    <div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima
      quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta
      illo unde iusto qui quasi doloremque.</div>
  </div>
  <script>
    $("#my-accordion").myAccordion();
  </script>
</body>

</html>